<template>
  <codemirror
    v-model="code"
    placeholder="Code gose here..."
    :style="{ height: '400px', fontSize: '18px' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tabSize="4"
    themeType="light"
    :options="options"
    :extensions="extensions"
    @ready="log('ready', $event)"
    @change="log('change', $event)"
    @focus="log('focus', $event)"
    @blur="log('blur', $event)"
    />
  <button @click="getMsg">点击</button>
</template>

<script>
import { Codemirror } from "vue-codemirror";
import { java } from "@codemirror/lang-java";
import {html} from '@codemirror/lang-html'
import {python} from '@codemirror/lang-python'
import {autocompletion} from '@codemirror/autocomplete'
import {cpp,cppLanguage} from '@codemirror/lang-cpp'
import {markdown} from '@codemirror/lang-markdown'
import { oneDark } from "@codemirror/theme-one-dark";
import { ref } from "vue";
export default {
  components: {
    Codemirror,
  },
  setup() {
    // const config = autocompletion({activateOnTyping:false,defaultKeymap:false})
    const code = ref(
`#include<bits/stdc++.h>
using namespace std;
int main(){

}`);
    const extensions = [markdown(),oneDark];

    return {
      code,
      extensions,
      log: console.log,
      options:{
        themeType: 'dark'
      }
    };
  },
  methods:{
    getMsg(){
      console.log(this.code)
    }
  }
};
</script>